import React, {Component} from 'react';
import {Button, Form, Input, DatePicker, Select, Radio, Collapse, Cascader, TimePicker} from 'antd';
import TheUpload from '@/components/TheUpload'
import Map from './Map'
import './style.less'
import {CaretRightOutlined} from "@ant-design/icons";

const {Panel} = Collapse;
const {TextArea} = Input;
const {RangePicker} = DatePicker;
export default class Step2 extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {
            timeType: '',
            shopShowFileList: [],
            shopEnvironmentList: [],
            shopBackgroundList: [],
            corporateIdentityCard: [],
            marker:[]
        }
    }

    componentDidMount() {
        this.props.onRef(this);
        let {data} = this.props;
        this.echoData(data)
    }

    // 数据回显
    echoData = (data) => {
        console.log(data)
        if (Object.keys(data).length == 0) {
            return
        }
        let shopShowFileList = [],
            shopEnvironmentList = [],
            shopBackgroundList = [],
            corporateIdentityCard = [];
        if (data.shopShowFile){
            shopShowFileList.push(
                {
                    uid: '-1',
                    name: 'image.png',
                    status: 'done',
                    url: data.shopShowFile,
                },
            )
        }
        if (data.shopEnvironment) {
            data.shopEnvironment.split(",").map((item, index) => {
                shopEnvironmentList.push(
                    {
                        uid: '-' + index,
                        name: index + 'image.png',
                        status: 'done',
                        url: item,
                    }
                )
            })
        }
        if (data.shopBackground) {
            data.shopBackground.split(",").map((item, index) => {
                shopBackgroundList.push(
                    {
                        uid: '-' + index,
                        name: index + 'image.png',
                        status: 'done',
                        url: item,
                    }
                )
            })
        }
        if (data.corporateIdentityCardPositive){
            corporateIdentityCard[0] = {
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: data.corporateIdentityCardPositive,
            }
        }
        if (data.corporateIdentityCardBack){
            corporateIdentityCard[1] = {
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: data.corporateIdentityCardBack,
            }
        }
        this.formRef.current.setFieldsValue(data)
        this.setState({
            shopShowFileList: [...shopShowFileList],
            shopEnvironmentList: [...shopEnvironmentList],
            shopBackgroundList: [...shopBackgroundList],
            corporateIdentityCard: [...corporateIdentityCard],
            marker:[...data.mapInfo.streetNumber.location.split(',')]
        })
    }
    getData = async () => {
        let formValue = await this.formRef.current.getFieldsValue();
        return formValue
    }
    onFinish = async () => {
        let formValue = await this.formRef.current.validateFields();
        return formValue
    }
    radioChange = (e) => {
        this.setState({
            timeType: e.target.value
        })
    }
    getFileResult = (value, key) => {
        if (value && value.length) {
            let arr = value.map(v => {
                // console.log(v)
                if (v.response && v.response.code === 0) {
                    return v.response.data
                } else {
                    return v.url
                }
            }).join(',')
            this.formRef.current.setFieldsValue({
                [key]: arr
            })
        }
    };
    getRegeo = (option) => {
        console.log(option, 'option');
        if (option.type === "success") {
            this.formRef.current.setFieldsValue({
                address: option.province + "/" + option.city + "/" + option.district,
                mapInfo: option,
                addressDetail: option.address
            })
        }
    }
    mapClear = () => {
        this.formRef.current.setFieldsValue({
            address: '',
            mapInfo: '',
            addressDetail: ''
        })
    }

    render() {
        const { timeType, marker, shopShowFileList, shopEnvironmentList, shopBackgroundList, corporateIdentityCard} = this.state;
        let accept = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/bmp']
        return (
            <div>
                <Collapse
                    bordered={false}
                    activeKey={[-1]}
                    expandIcon={({isActive}) => <>门店信息<CaretRightOutlined rotate={90}/></>}
                    style={{marginBottom: "15px"}}
                >
                    <Panel key="full"></Panel>
                </Collapse>
                <Form
                    // style={{ marginTop: 20 }}
                    ref={this.formRef}
                    initialValues={{}}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 8,
                    }}
                    onFinish={(values) => this.onFinish(values)}
                    autoComplete="off"
                >
                    <Form.Item
                        label="地图点位"
                        name="mapInfo"
                        rules={[
                            {
                                required: true,
                                message: '请选择地图点位',
                            },
                        ]}
                    >
                        <Map data={marker} clear={this.mapClear} getRegeo={this.getRegeo}></Map>
                    </Form.Item>
                    <Form.Item
                        label="所属地区"
                        name="address"
                        rules={[
                            {
                                required: true,
                                message: '请在地图上选择点位',
                            },
                        ]}
                    >
                        <Input placeholder="请在地图上选择点位获取" disabled></Input>
                    </Form.Item>
                    <Form.Item
                        label="详细地址"
                        name="addressDetail"
                        rules={[
                            {
                                required: true,
                                message: '请输入详细地址',
                            },
                        ]}
                    >
                        <Input placeholder="请在地图上选择点位获取或手动输入地址"></Input>
                    </Form.Item>
                    <Form.Item
                        label="门头照"
                        name="shopShowFile"
                        rules={[
                            {
                                required: true,
                                message: '请上传门头照',
                            },
                        ]}
                        extra={`仅支持gif、jpeg、png、bmp4种格式，大小不超过10M，最多1张图片`}
                    >
                        <TheUpload accept={accept} fileList={shopShowFileList}
                                   maxSize={10} getFileResult={(e) => this.getFileResult(e, 'shopShowFile')} len={1}/>
                    </Form.Item>
                    <Form.Item
                        label="店内环境照片"
                        name="shopEnvironment"
                        rules={[
                            {
                                required: true,
                                message: '请上传店内环境照片',
                            },
                        ]}
                        extra={`仅支持gif、jpeg、png、bmp4种格式，大小不超过10M，最多15张图片`}
                    >
                        <TheUpload accept={accept}fileList={shopEnvironmentList}
                                   maxSize={10} getFileResult={(e) => this.getFileResult(e, 'shopEnvironment')}
                                   len={15}/>
                    </Form.Item>
                    <Form.Item
                        label="收银台照片"
                        name="shopBackground"
                        rules={[
                            {
                                required: true,
                                message: '请上传收银台照片',
                            },
                        ]}
                        extra={`仅支持gif、jpeg、png、bmp4种格式，大小不超过10M，最多3张图片`}
                    >
                        <TheUpload accept={accept} fileList={shopBackgroundList}
                                   maxSize={10} getFileResult={(e) => this.getFileResult(e, 'shopBackground')} len={3}/>
                    </Form.Item>
                    <Form.Item
                        label="营业时间"
                    >
                        <Form.Item
                            name="timeType"
                            rules={
                                [
                                    {
                                        required: true,
                                        message: '请选择营业时间',
                                    },
                                ]}
                            style={{
                                display: 'inline-block',
                                width: 'calc(50% - 8px)',
                            }}
                        >
                            <Radio.Group onChange={this.radioChange}>
                                <Radio value="day"> 全天 </Radio>
                                <Radio value="custom"> 自定义 </Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) => prevValues.timeType !== currentValues.timeType}
                        >
                            {
                                ({getFieldValue}) =>
                                    getFieldValue('timeType') === 'custom' ? (
                                        <Form.Item
                                            name="customTime"
                                            rules={[
                                                {
                                                    required: timeType === 'custom',
                                                    message: '请选择营业时间',
                                                },
                                            ]}
                                            style={{
                                                display: 'inline-block',
                                                width: 'calc(50% - 8px)',
                                                margin: '0 8px',
                                            }}
                                        >
                                            <TimePicker.RangePicker format={'HH:mm'}/>
                                        </Form.Item>
                                    ) : null
                            }
                        </Form.Item>
                    </Form.Item>
                    <Form.Item
                        rules={[{required: true}]}
                        label="法人身份证正面"
                        name={'corporateIdentityCardPositive'}>
                        <TheUpload getFileResult={value => this.getFileResult(value, 'corporateIdentityCardPositive')}
                                   maxSize={10} len={1} fileList={corporateIdentityCard[0]}/>
                    </Form.Item>
                    <Form.Item
                        rules={[{required: true}]}
                        label="法人身份证背面"
                        name={'corporateIdentityCardBack'}>
                        <TheUpload getFileResult={value => this.getFileResult(value, 'corporateIdentityCardBack')}
                                   maxSize={10} len={1} fileList={corporateIdentityCard[1]}/>
                    </Form.Item>
                    <Form.Item
                        rules={[{required: true}]}
                        label="收款账号(支付宝)"
                        name={'alipayAccount'}>
                        <Input placeholder="请输入收款账号"/>
                    </Form.Item>
                    <Form.Item
                        label="备注"
                        name="remarks"
                    >
                        <TextArea showCount
                                  maxLength={300}/>
                    </Form.Item>
                    {/*<Form.Item*/}
                    {/*    wrapperCol={{*/}
                    {/*        offset: 8,*/}
                    {/*        span: 16,*/}
                    {/*    }}*/}
                    {/*>*/}
                    {/*    <Button type="default" onClick={() => this.props.history.go(-1)} style={{ 'marginRight': 20 }}>*/}
                    {/*        取消*/}
                    {/*    </Button>*/}
                    {/*    <Button type="primary" htmlType="submit">*/}
                    {/*        确定*/}
                    {/*    </Button>*/}
                    {/*</Form.Item>*/}
                </Form>
            </div>
        );
    }
}
